<template>
	<view>
		<view class="list"
			v-for="(item,index) in clsList"
			:key="index"
		>
			<view class="listL hasFlex" @tap="goClsDet(item)">
				<view class="head">
					<text class="iconfont icon-banji"></text>
				</view>
				<view class="clsName spaceBet">
					{{item.levelC}}{{item.levelD}}班
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			clsList:Array
		},
		methods:{
			cancelGz(item){
				this.$emit('cancelGz',item);
			},
			applyCancelBzr(item){
				this.$emit('applyCancelBzr',item);
			},
			goClsDet(item){
				this.$emit('goClsDet',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding: 20rpx;
		background: #fff;
		@include respTo(phone){
			margin-bottom: 30rpx;
		}
		@include respTo(pad){
			margin-bottom: 20rpx;
		}
		.listL{
			align-items: center;
		}
		.clsName{
			flex: 1;
			color: $pss-text-color3;
			font-weight: bold;
			@include respTo(phone){
				font-size: $font-size30;
			}
			@include respTo(pad){
				font-size: $padSize18;
			}
			.icon-gengduo{
				font-weight: normal;
				color: $pss-text-colora;
				@include respTo(phone){
					font-size: $font-size24;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
			}
		}
		.head{
			@include respTo(phone){
				width: 90rpx;
				height: 90rpx;
				line-height: 100rpx;
			}
			@include respTo(pad){
				width: 70rpx;
				height: 70rpx;
				line-height: 80rpx;
			}
			background: $pss-color-blue;
			color: #fff;
			border-radius: 50%;
			text-align: center;
			margin-right: 20rpx;
			.iconfont{
				margin-left: 10rpx;
				@include respTo(phone){
					font-size: 45rpx;
				}
				@include respTo(pad){
					font-size: 40rpx;
				}
			}
		}
	}
</style>